<template>
    <div class="king-editor">
        <!-- 工具栏 -->
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            mode="default"
        />

        <!-- 编辑器 -->
        <Editor
            style="height: 320px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="handleCreated"
        />

        <!-- 源码编辑按钮 -->
        <div class="source-btn">
            <el-button type="primary" size="small" @click="openSourceDialog">
                源码编辑
            </el-button>
        </div>

        <!-- 源码弹窗 -->
        <el-dialog
            title="源码编辑"
            v-model="showSource"
            width="60%"
            destroy-on-close
        >
      <textarea
          v-model="sourceCode"
          style="width: 100%; height: 400px; font-family: monospace; font-size: 14px;"
      ></textarea>

            <template #footer>
                <el-button @click="showSource = false">取消</el-button>
                <el-button type="primary" @click="applySource">应用源码</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { shallowRef, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 双向绑定内容
const valueHtml = defineModel({ default: '' })

// 源码弹窗
const showSource = ref(false)
const sourceCode = ref('')

// 打开源码编辑弹窗
const openSourceDialog = () => {
    sourceCode.value = valueHtml.value // 取编辑器里的内容
    showSource.value = true
}

// 应用源码
const applySource = () => {
    valueHtml.value = sourceCode.value
    showSource.value = false
    // editorRef.value.dangerouslyInsertHtml(valueHtml.value)
}

// 工具栏配置
const toolbarConfig = {
    toolbarKeys: ['headerSelect', 'bold', 'italic', 'underline', 'uploadImage', 'uploadVideo', 'fullScreen']
}

// 编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            maxNumber: 5,
            maxFileSize: 2 * 1024 * 1024,
            fieldName: 'file',
            server: `${import.meta.env.VITE_UPLOAD_IMAGE_URL}`,
            customInsert: (res, insertFn) => {
                insertFn(res.data.url, '图片')
            }
        },
        uploadVideo: {
            maxNumber: 5,
            maxFileSize: 10 * 1024 * 1024,
            fieldName: 'file',
            server: `${import.meta.env.VITE_UPLOAD_VIDEO_URL}`,
            customInsert: (res, insertFn) => {
                insertFn(res.data.url, '视频')
            }
        }
    },
    paste: {
        // 粘贴时不过滤 HTML
        filterPasteContent: false,
    },
}

// 编辑器实例
const editorRef = shallowRef()
const handleCreated = (editor) => {
    editorRef.value = editor
}

// 销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

// 调试观察
watch(() => valueHtml.value, (val) => {
    nextTick(() => {
        console.log('valueHtml.value', val)
    })
})
</script>

<style lang="less" scoped>
.king-editor {
    border: 1px solid #ccc;
    position: relative;
    .source-btn {
        margin-top: 10px;
        text-align: right;
    }
}
</style>
